<template>
	<view class="message">
		<view class="header">
			<view class="title">
				<navigator open-type="navigateBack" delta="1">
					<image src="../../static/image/fanhui.png" mode="widthFix" style="width: 60rpx;"></image>
				</navigator>
				<text style="color: #FFFFFF;font-size: 36rpx;">消息</text>
				<image src="../../static/image/shezhi.png" mode="widthFix" style="width: 60rpx;"></image>
			</view>
		</view>
		<view class="tip">
			<text>打开系统通知, 即使掌握物流信息。</text>
			<button type="default" size="mini">去开启</button>
		</view>
		<view class="content">
			<view class="item">
				<view class="image">
					<image src="../../static/image/tu1@2x.png" mode="widthFix" style="width: 92rpx;"></image>
				</view>
				<view class="center">
					<text style="font-weight: bold; font-size: 30rpx;">优惠活动</text>
					<text style="font-size: 24rpx; color: #acacac;">爆款保养限时低价, 最高再送150元油...</text>
				</view>
				<view class="timer" style="font-size: 20rpx;">
					20/09/27
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		.header {
			overflow: hidden;
			height: 190rpx;
			background: linear-gradient(120deg, #fd8839, #fd873c, #fd8846, #fd8c38, #fda548, #fda548, #fd793a, #fd883a);

			.title {
				box-sizing: border-box;
				height: 190rpx;
				padding: 0 24rpx 24rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}
		}

		.tip {
			font-size: 20rpx;
			color: #ff8219;
			background-color: #fff5db;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 24rpx;

			button {
				font-size: 20rpx;
				color: #FFFFFF;
				border-radius: 18rpx;
				background-color: #ff5300;
				margin: 0;
			}
		}

		.content {
			padding: 24rpx;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 0;
				border-bottom: 1px solid #fbfbfb;

				.center {
					display: flex;
					flex-direction: column;
				}
			}

		}
	}
</style>
